<template>
  <div class="scorecreatewrapper1 zanwei-top" v-if="rowobj!=null">
    <head-nav></head-nav>
    <div class="scorecreate1" v-if="rowobj.JPINFO.JPLX==1">
      <div class="scorecreate-top-img1">
        <!-- <img v-if="rowobj.JPINFO.JPTP.length>0" :src="imgPath+rowobj.JPINFO.JPTP[0].ID" /> -->
      </div>
      <div class="scorecreate-top1">
        <h3>{{rowobj.JPINFO.JPMC}}</h3>
        <div>
          <p>恭喜您中奖了！</p>
        </div>
      </div>
      <div class="scorecreate-bottom1">
        <div class="qrcode" id="qrcode" v-show="rowobj.SFHX != 1">
          <!-- <img/> -->
        </div>
        <div v-show="rowobj.SFHX != 1">
          <p>验证码已生成，请于{{jplqsj}}凭验证码及有效证件兑换领取。</p>
        </div>
        <div v-show="rowobj.SFHX == 1">
          <p>恭喜您已经领取了奖品!</p>
        </div>
      </div>
    </div>
    <div class="scorecreate-ll" v-if="rowobj.JPINFO.JPLX==2">
      <div class="llbg">{{rowobj.JPINFO.LLCZL}}M流量包</div>
      <div class="text">
        <div>奖品名称:{{rowobj.JPINFO.JPMC}}</div>
        <div>领取成功:{{rowobj.JPINFO.LLCZL}}M</div>
        <div>流量已赠送至:{{rowobj.MOBILE}}</div>
      </div>
    </div>
    <div class="scorecreate-hb" v-if="rowobj.JPINFO.JPLX==3 || rowobj.JPINFO.JPLX==4">
      <div class="hbbtn">{{rowobj.XJJE}}元现金红包</div>

      <div class="jpmc">奖品名称:{{rowobj.JPINFO.JPMC}}</div>

      <div
        class="lqhb"
        @click="lqxjhb(rowobj.ID, rowobj.ZJUSERID,rowobj.JPINFO.JPLX)"
        v-if="islq == ''"
      >领取</div>
    </div>

    <div class="scorecreate-hb" v-if="rowobj.JPINFO.JPLX==5">
      <div class="hbbtn">{{rowobj.LBJE}}元红包</div>

      <div class="jpmc">奖品名称:{{rowobj.JPINFO.JPMC}}</div>

      <div
        class="lqhb"
        @click="lqxjhb(rowobj.ID, rowobj.ZJUSERID,rowobj.JPINFO.JPLX)"
        v-if="islq == ''"
      >领取</div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
import { Toast, MessageBox } from "mint-ui";
import { mapActions } from "vuex";
var sss;
var setTime;

export default {
  data() {
    return {
      rowobj: null,
      imgPath: "",
      islq: "",
      jplqsj:""
    };
  },
  methods: {
    ...mapActions({
      commit_title: "commit_title"
    }),
    // 领取红包
    lqxjhb(id, zjuser, jplx) {
      let oid = id;
      let phone = "";
      let page = this;

      var msg = "领取成功，请去微信钱包查看！";
      if (jplx == 4) {
        msg = "红包已发放，请到公众号领取！";
      }else if (jplx == 5){
        msg = '领取成功，请去会员中心查看！'
      }

      api.createPrizes(this, oid, phone, zjuser, res => {
        let data = res.data;
        if (data.code == 0) {
          page.islq = "lqcg";
          MessageBox.confirm(msg, "提示")
            .then(action => {
              WeixinJSBridge.call("closeWindow");
            })
            .catch(err => {
              page.$router.push({
                path: "/wallet"
              });
            });
        } else {
          Toast({
            message: data.msg,
            duration: 2000
          });
        }
      });
    },
    checkHX(jpid) {
      let page = this;
      api.getHdUserZjJp(jpid, page, cb);
      function cb(res) {
        let re = res.data;

        if (re.code == 0) {
          let data = re.data;
          let hx = data.SFHX;
          if (hx == 1) {
            clearInterval(sss);
            Toast({
              message: "已核销",
              iconClass: "iconfont icon-duigou yhx",
              duration: 3000
            });
            setTimeout(function() {
              page.$router.push("/wallet");
            }, 3000);
          }
        } else {
          Toast({
            message: re.msg,
            duration: 3000
          });
        }
      }
    }
  },
  mounted() {
    let page = this;
    page.imgPath = page.host.filehost;
    if (Object.getOwnPropertyNames(this.$route.query).length !== 0) {
      let jpid = this.$route.query.jpid;
      this.islq = this.$route.query.islq;
      api.getHdUserZjJp(jpid, page, cb);
      function cb(res) {
        let re = res.data;
        console.log("中奖礼品");
        console.log(re);
        if (re.code == 0) {
          let data = re.data;
          page.rowobj = data;
          console.log(page.rowobj.XJJE, "多少钱");
          if (data.JPINFO.JPLX == 1) {

            page.jplqsj = data.HXKSSJ+"-"+data.HXJSSJ
            page.$nextTick(function() {
              var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: data.ORDERID,
                width: 128,
                height: 128,
                colorDark: "#000000",
                colorLight: "#ffffff"
              });
            });

            // 核销监听
            let date = new Date();
            if (page.rowobj.SFHX == 0) {
              sss = setInterval(function() {
                let dateNow = new Date();
                let time = dateNow - date;
                console.log(time);
                if (time < 300000) {
                  page.checkHX(jpid);
                } else {
                  clearInterval(sss);
                  MessageBox.alert("长时间未核销正帮您跳转..").then(action => {
                    page.$router.push({ path: "/score" });
                  });
                }
              }, 1000);
            }
          }
        } else {
          Toast({
            message: re.msg,
            duration: 5000
          });
          setTime = setTimeout(function() {
            page.$router.go(-1);
          }, 5000);
        }
      }
    } else {
      console.log("xixixi2");
    }
  },
  destroyed() {
    clearInterval(sss);
    clearTimeout(setTime);
  }
};
</script>

<style lang="less" scope>
.yhx {
  font-size: 0.55rem;
}
.scorecreatewrapper1 {
  .scorecreate1 {
    .scorecreate-top-img1 {
      /* width: 4.4rem;
      height: 1.7rem;
      border: #cbcbcc solid 1px;
      margin-top: 1.12rem;
      margin-bottom: 0.6rem; */
      width: 100%;
      height: 1rem;
      margin-bottom: 0.4rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .scorecreate-top1 {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 0.2rem;
      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #f05dc4;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }
      h3 {
        font-size: 0.32rem;
        color: #000000;
      }
      span {
        color: #f05dc4;
        font-size: 0.32rem;
        margin-top: 0.2rem;
        margin-bottom: 0.6rem;
      }
      b {
        display: block;
        color: #000000;
        font-size: 0.24rem;
      }
      p {
        color: #f05dc4;
        font-size: 0.32rem;
        margin-top: 0.04rem;
        margin-bottom: 0.2rem;
        text-indent: 0.28rem;
      }
    }
    .scorecreate-bottom1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 0.5rem;
      .qrcode {
        width: 2.8rem;
        height: 2.8rem;
        /* border: #cbcbcc solid 1px; */
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p,
      div {
        width: 3.56rem;
        font-size: 0.24rem;
        color: #000000;
        text-align: center;
      }
    }
  }
  .tkcg {
    margin-top: 0.5rem !important;
  }
}
// 流量
.scorecreate-ll {
  background-image: url("../../assets/img/llbg.jpg");
  background-size: 100% 100%;
  width: 5rem;
  height: 3rem;

  margin: auto;
  margin-top: 1rem;
  .llbg {
    color: #f05dc4;
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    line-height: 3rem;
  }
  .text {
    padding-top: 0.5rem;

    div {
      padding: 0.18rem 0;
      font-size: 0.32rem;
    }
  }
}
// 现金红包
.scorecreate-hb {
  background-image: url("../../assets/img/xjhb.png");
  background-size: 100% 100%;
  width: 5rem;
  height: 2.6rem;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  .lqhb {
    line-height: 0.4rem;
    padding: 0.1rem 0.2rem;
    border-radius: 0.3rem;
    color: #ffffff;
    background-color: #f05dc4;
    margin: 0.3rem auto;
  }
  .hbbtn {
    background-color: #f05dc4;
    border-radius: 50px;
    display: inline-block;
    padding: 0.15rem 0.3rem;
    color: #ffffff;
    font-size: 0.28rem;
    margin-top: 1.3rem;
    margin-left: 0.2rem;
  }
  .jpmc {
    color: #f05dc4;
    margin-top: 0.8rem;
  }
}

// 乐币红包
.scorecreate-lbhb {
  background-image: url("../../assets/img/lbhb.jpg");
  background-size: 100% 100%;
  width: 5rem;
  height: 2.6rem;
  margin: auto;
  margin-top: 1rem;
  text-align: center;
  .lqhb {
    line-height: 0.4rem;
    padding: 0.1rem 0.2rem;
    border-radius: 0.3rem;
    color: #ffffff;
    background-color: #f05dc4;
    margin: 0.3rem auto;
  }
  .hbbtn {
    background-color: #f05dc4;
    border-radius: 50px;
    display: inline-block;
    padding: 0.15rem 0.3rem;
    color: #ffffff;
    font-size: 0.28rem;
    margin-top: 1.4rem;
    margin-left: 0.2rem;
  }
  .jpmc {
    color: #f05dc4;
    margin-top: 0.8rem;
  }
}
</style>
